<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.staticfile.org/cesium/1.69.0/Widgets/widgets.css">
    <link rel="stylesheet" href="../css//index.css">
</head>

<body>
    <div class="fun-menu">
        <button onclick="load('01')">近景改变</button>
        <button onclick="load('02')">近景改变</button>
        <button onclick="load('03')">近景改变</button>
        <button onclick="defaultSkybox(0)">恢复近景默认天空盒</button>
        <button onclick="load1()">远景改变</button>
        <button onclick="test1()">近景远景分割距离</button>
        <button onclick="defaultSkybox(1)">恢复远景默认天空盒</button>
    </div>
    <div id=cesiumContainer></div>

    <script src="http://cdn.staticfile.org/cesium/1.69.0/Cesium.js"></script>

    <script src="../libs/cpc/index.js"></script>
    <script>
        const map = new cpc.Map({
            container: "cesiumContainer",
            baseMaps: [
                {
                    type: "TDTImageryLayer",
                    mold: "image",
                    tk: "7b435c61bff7f77eb49206e10d6397bd",
                },
            ],
            skyBox: {
                //会直接关闭大气层（存在大气层，近景效果不佳）
                nearSkyBox: {
                    positiveX: "../images/skybox/03/px.jpg",
                    positiveY: "../images/skybox/03/py.jpg",
                    positiveZ: "../images/skybox/03/pz.jpg",
                    negativeX: "../images/skybox/03/nx.jpg",
                    negativeY: "../images/skybox/03/ny.jpg",
                    negativeZ: "../images/skybox/03/nz.jpg",
                },
                farDistance: 5500,
                farSkyBox: {
                    positiveX: "../images/skybox/04/px.jpg",
                    positiveY: "../images/skybox/04/py.jpg",
                    positiveZ: "../images/skybox/04/pz.jpg",
                    negativeX: "../images/skybox/04/nx.jpg",
                    negativeY: "../images/skybox/04/ny.jpg",
                    negativeZ: "../images/skybox/04/nz.jpg",
                },
            },
        });


        function load(fileD) {
            map.camera.flyTo({position:{x:119,y:26,z:1000},angle:{pitch:1}})
            map.skyBox.setNearSkyBox({
                positiveX: `../images/skybox/${fileD}/px.jpg`,
                positiveY: `../images/skybox/${fileD}/py.jpg`,
                positiveZ: `../images/skybox/${fileD}/pz.jpg`,
                negativeX: `../images/skybox/${fileD}/nx.jpg`,
                negativeY: `../images/skybox/${fileD}/ny.jpg`,
                negativeZ: `../images/skybox/${fileD}/nz.jpg`,
            });
        }
        function load1() {
            map.camera.flyTo({position:{x:119,y:26,z:10000000},angle:{}})
            map.skyBox.setFarSkyBox({
                positiveX: `../images/skybox/04/px.jpg`,
                positiveY: `../images/skybox/04/py.jpg`,
                positiveZ: `../images/skybox/04/pz.jpg`,
                negativeX: `../images/skybox/04/nx.jpg`,
                negativeY: `../images/skybox/04/ny.jpg`,
                negativeZ: `../images/skybox/04/nz.jpg`,
            });
        }
        function test1() {
            map.skyBox.setFarDistance(10000);
        }
        function defaultSkybox(type) {
            if (type === 0) {
                map.skyBox.setNearSkyBox();
            } else {
                map.skyBox.setFarSkyBox();
            }
        }
    </script>
</body>

</html>